<template>
    <section class='rec-table box-table' :style="{'width':DivWidth,'min-width':minWidth}">
        <!-- <div class="allCount" v-if="totalCnt>0"><span>总条数:{{totalCnt}}</span></div> -->
        <Table :data=filterTableData :columns=tableColumns :size="tableSize" :border=showBorder @on-expand="expandData" @on-row-click="clickRow" :height="tableHeight"></Table>
        <slot></slot>
        <div class="mt-20" v-show="isShowPage">
            <Page :current=currentPage  :total=totalCnt show-total show-elevator @on-page-size-change="onPageSizeChage" @on-change="onChangePage" placement="top" :page-size="pageSize"></Page>
        </div>
    </section>
</template>
<script>
import Vue from "vue";
import {delay} from "../commons/staticName"
export default {
    name: "MyTable",
    props:{
        tableData:{
            type:Array,
            default:()=>{return []}
        },
        tableColumns:{
            type:Array,
            default:()=>{return []}
        },
        showBorder:{
            type:Boolean,
            default:true,
        },
        tableSize:{
            type:String,
            default:"default"
        },
        //是否通过HTTP加载数据
        isLoadData:{
            type:Boolean,
            default:false,
        },
        isShowPage:{ //是否分页
            type:Boolean,
            default:false,
        },
        //totalCnt>0 总条数
        totalCnt:{
            type:Number,
            default:0,
        },
        //页码
        current:{
            type:Number,
            default:0,
        },
        width:{
            type:Number,
            default:0,
        },
        minWidth:{
            type:Number,
            default:0,
        },
        limitHeight:{
            type:Number,
            default:0,
        }
    },
    data(){
        return {
            currentPage:1,
            pageSize:50,
        }
    },
    watch:{
        current (val) {
            if(this.currentPage!=val){
                this.currentPage = val;
            }
        },
    },
    computed:{
        filterTableData(){
            let newTableData= [];
            if(this.isLoadData||!this.isShowPage){
                newTableData = this.tableData;
            }else{
                let offset = (this.currentPage - 1) * this.pageSize; 
                newTableData =(offset + this.pageSize >= this.tableData.length) ? this.tableData.slice(offset, this.tableData.length) : this.tableData.slice(offset, offset + this.pageSize);
            }
            return newTableData;
        },
        DivWidth(){
            if(this.width==0){
                return "100%";
            }else{
                return this.width+"px";
            }
        },
        tableHeight(){
            if(this.limitHeight==0){
                return "";
            }else{
                return this.limitHeight-105;
            }
        }
    },
    methods:{
        onChangePage(newPage){
            this.currentPage = newPage;
            this.reloadData();
        },
        onPageSizeChage(newPageSize){
            this.pageSize = newPageSize;
            let offset = (this.currentPage - 1) * this.pageSize;
            if(offset>this.totalCnt){
                this.currentPage = 1;
            }else{
                this.reloadData();
            }
        },
        reloadData(){
            this.$emit("submit",this.currentPage,this.pageSize);
        },
        expandData(rows,status){
            this.$emit("expandRow",rows,status)
        },
        clickRow(rows,index){
            this.$emit("onClickRow",rows,index)
        }
    },
    created(){
    },
    beforeDestroy(){
    }
}
</script>
  
